import { useEffect, useRef, useState } from 'react';
import { Button, Row, Col, Empty, Space, Tag, Spin } from 'antd';
import { ColumnChart } from 'bizcharts';
import classNames from 'classnames';
import styles from './index.less';

const rankInfo = [
  {
    id: 1951,
    curRank: 1,
    progressRank: 0,
    score: 1126,
    addScore: 0,
    subScore: 0,
    remainPoint: 0,
    usePoint: 0,
    assessGroupName: '1号陈睿安',
    xsName: null,
    xsNo: null,
  },
  {
    id: 1952,
    curRank: 2,
    progressRank: 0,
    score: 1076,
    addScore: 0,
    subScore: 0,
    remainPoint: 0,
    usePoint: 0,
    assessGroupName: '2号白一诺',
    xsName: null,
    xsNo: null,
  },
  {
    id: 1953,
    curRank: 3,
    progressRank: 0,
    score: 932,
    addScore: 0,
    subScore: 0,
    remainPoint: 0,
    usePoint: 0,
    assessGroupName: '3号李宜函',
    xsName: null,
    xsNo: null,
  },
  {
    id: 1955,
    curRank: 4,
    progressRank: 0,
    score: 928,
    addScore: 0,
    subScore: 0,
    remainPoint: 0,
    usePoint: 0,
    assessGroupName: '5号康佳子琪',
    xsName: null,
    xsNo: null,
  },
  {
    id: 1956,
    curRank: 5,
    progressRank: 0,
    score: 876,
    addScore: 0,
    subScore: 0,
    remainPoint: 0,
    usePoint: 0,
    assessGroupName: '6号李朋锴',
    xsName: null,
    xsNo: null,
  },
  {
    id: 1954,
    curRank: 6,
    progressRank: 0,
    score: 583,
    addScore: 0,
    subScore: 0,
    remainPoint: 0,
    usePoint: 0,
    assessGroupName: '4号杨哲',
    xsName: null,
    xsNo: null,
  },
  {
    id: 1957,
    curRank: 7,
    progressRank: 0,
    score: 559,
    addScore: 0,
    subScore: 0,
    remainPoint: 0,
    usePoint: 0,
    assessGroupName: '7号杨舒萌',
    xsName: null,
    xsNo: null,
  },
];
export default () => {
  return (
    <div
      className={classNames('campus-activity-wrapper', styles.wrapper)}
      style={{ display: 'flex' }}
    >
      <div className={classNames('bg', 'bg-1', styles['bg-1'])} />
      <div className="bg bg-2" />
      <Row className={styles['core-wrapper']} style={{ flexFlow: 'column', flex: 1 }}>
        <Col flex="52px">
          <Row className={classNames('linear-title', styles.title)} justify="center">
            <span style={{ marginLeft: 10 }}>小组积分统计</span>
          </Row>
        </Col>
        <Col flex="40px" style={{ display: 'flex' }}>
          <Space align="center">
            <Tag color="processing">本周</Tag>
            <Tag color="default">上周</Tag>
            <Tag color="default">本月</Tag>
            <Tag color="default">上月</Tag>
            <Tag color="default">本学期</Tag>
            <Tag color="default">上学期</Tag>
            <Tag color="default">本学年</Tag>
          </Space>
        </Col>
        <Col flex={1}>
          <ColumnChart
            width={430}
            height={200}
            data={rankInfo}
            xField="assessGroupName"
            yField="score"
            label={{ position: 'middle' }}
            xAxis={{
              label: {
                style: { fontSize: 12 },
                autoRotate: true,
              },
            }}
          />
        </Col>
      </Row>
    </div>
  );
};
